<template lang='pug'>
  Modal(v-model="modalShow" title="新建目标任务" width="800")
    Form(ref="formValidate" :model="weekTargetData" :label-width="120")
      Row(type="flex" justify="start" :gutter="16")
        Col(span="12")
          FormItem(label="本月合同目标:")
            Input.unit-input.input-has-border(v-model="weekTargetData.month_BillingTarget" type="number" placeholder="请输入")
            span.unit 元
        Col(span="12")
          FormItem(label="本周合同目标:")
            Input.unit-input.input-has-border(v-model="weekTargetData.week_BillingTarget" type="number" placeholder="请输入")
            span.unit 元
        Col(span="24")
          FormItem(label="本周商机目标:")
            .label.mr-40
              | A：
              Input.unit-input.input-has-border(v-model="weekTargetData.businessTargetA" type="number" readonly	 placeholder="请输入" style="width:150px")
              span.unit 个
            .label.mr-40
              | B：
              Input.unit-input.input-has-border(v-model="weekTargetData.businessTargetB" type="number" readonly	 placeholder="请输入" style="width:150px")
              span.unit 个
            .label
              | C：
              Input.unit-input.input-has-border(v-model="weekTargetData.businessTargetC" type="number" readonly	 placeholder="请输入" style="width:150px")
              span.unit 个
        Col(span="12")
          FormItem(label="日期:")
            DatePicker.input-has-border(:value="weekTargetData.date" type="date" :options="options3" @on-change="dateChange" placeholder="请选择日期")
    template(slot="footer")
      Button(@click="modalShow = false") 取消
      Button(type="info" @click="saveWeekPlan") 保存
</template>

<script>
import WorkScheduleApi from '@/api/WorkSchedule.api.js'
export default {
  name:'',
  props:{
    weekTargetData: Object,
  },
  data () {
    return {
      modalShow: false,

      options3: {
        disabledDate (date) {
          return date && date.valueOf() < Date.now() - 86400000;
        }
      },
      
      ruleValidate: {
        beginTime: [
          { required: true, message: '开始时间不能为空', trigger: 'change' }
        ],
        endTime: [
          { required: true, message: '结束时间不能为空', trigger: 'change' }
        ],
        planTypeId: [
          { required: true, message: '计划分类不能为空', trigger: 'change' }
        ],
        customerGUID: [
          { required: true, message: '关联客户不能为空', trigger: 'change' }
        ],
        content: [
          { required: true, message: '计划详情不能为空', trigger: 'change' }
        ]
      }
    }
  },

  components: {},

  computed: {
  },

  beforeMount() {},

  mounted() {},

  methods: {
    show () {
      this.modalShow = true
    },
    dateChange(val) {
      console.log(val)
      console.log(this.weekTargetData)
      this.$emit("date-change", val)
    },
    saveWeekPlan () {
      console.log(this.weekTargetData)
      WorkScheduleApi.SaveWeekPlan(this.weekTargetData).then(res => {
        if (res.data.success) {
          this.modalShow = false
          this.$Message.success(res.data.message)
        } else {
          this.$Message.error({
            content: res.data.message,
            duration: 10,
            closable: true
          })
        }
      })
    }
  },

  watch: {}

}

</script>
<style lang='less' scoped>
.label{
  position: relative;
  display: inline-block;
  width: 176px;
}
.unit-input{
    padding-right: 20px;
  }
span.unit{
  position: absolute;
  top: 0;
  right: 0;
}
</style>